import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import { 
  CompassOutlined, 
  TeamOutlined, 
  HomeOutlined, 
  HistoryOutlined,
  HeartOutlined,
  HeartFilled,
  StarOutlined,
  SmileOutlined
} from '@ant-design/icons';
import './App.css';

// 页面组件
import CustomerManagement from './pages/CustomerManagement';
import OptimizeRoute from './pages/OptimizeRoute';
import RoutePlans from './pages/RoutePlans';
import RouteDetail from './pages/RouteDetail';

const { Header, Content, Sider } = Layout;

const App: React.FC = () => {
  return (
    <Router>
      <Layout style={{ minHeight: '100vh' }}>
        <Header className="header">
          <div className="logo">倩倩规划助手</div>
        </Header>
        <Layout>
          <Sider width={200} className="site-sider">
            <Menu
              mode="inline"
              defaultSelectedKeys={['1']}
              style={{ height: '100%', borderRight: 0 }}
            >
              <Menu.Item key="1" icon={<HomeOutlined />}>
                <Link to="/">首页</Link>
              </Menu.Item>
              <Menu.Item key="2" icon={<TeamOutlined />}>
                <Link to="/customers">客户管理</Link>
              </Menu.Item>
              <Menu.Item key="3" icon={<CompassOutlined />}>
                <Link to="/optimize-route">路线优化</Link>
              </Menu.Item>
              <Menu.Item key="5" icon={<HistoryOutlined />}>
                <Link to="/route-plans">历史路线</Link>
              </Menu.Item>
            </Menu>
          </Sider>
          <Layout style={{ padding: '0 24px 24px' }}>
            <Content
              className="site-content"
              style={{
                padding: 24,
                margin: 0,
                minHeight: 280,
                background: '#fff'
              }}
            >
              <Routes>
                <Route path="/" element={<div className="welcome-page">
                  <div className="cover-image">
                    <HeartFilled className="love-icon-left" />
                    <HeartFilled className="love-icon-right" />
                    <HeartFilled className="heart-float" />
                    <StarOutlined className="heart-float" />
                    <HeartFilled className="heart-float" />
                    <SmileOutlined className="heart-float" />
                    <img src="/cover-image.jpg" alt="倩倩规划助手封面" />
                  </div>
                  <h1>欢迎使用倩倩规划助手</h1>
                  <div className="heart-container">
                    <HeartOutlined className="heart-icon" />
                    <HeartOutlined className="heart-icon" />
                    <HeartOutlined className="heart-icon" />
                    <span className="heart-text">倩倩万岁</span>
                    <HeartOutlined className="heart-icon" />
                    <HeartOutlined className="heart-icon" />
                    <HeartOutlined className="heart-icon" />
                  </div>
                  <p>请选择左侧菜单进行操作</p>
                </div>} />
                <Route path="/customers" element={<CustomerManagement />} />
                <Route path="/optimize-route" element={<OptimizeRoute />} />
                <Route path="/route-plans" element={<RoutePlans />} />
                <Route path="/route-detail" element={<RouteDetail />} />
              </Routes>
            </Content>
          </Layout>
        </Layout>
      </Layout>
    </Router>
  );
};

export default App;
